﻿<style>
    ul.bankList {
        clear: both;
        height: 202px;
        width: 636px;
    }

        ul.bankList li {
            list-style-position: outside;
            list-style-type: none;
            cursor: pointer;
            float: left;
            margin-right: 0;
            padding: 5px 2px;
            text-align: center;
            width: 90px;
        }

    .list-content li {
        list-style: none outside none;
        margin: 0 0 10px;
    }

        .list-content li .boxContent {
            display: none;
            width: 636px;
            border: 1px solid #cccccc;
            padding: 10px;
        }

        .list-content li.active .boxContent {
            display: block;
        }

        .list-content li .boxContent ul {
            height: 280px;
        }

    i.VISA, i.MASTE, i.AMREX, i.JCB, i.VCB, i.TCB, i.MB, i.VIB, i.ICB, i.EXB, i.ACB, i.HDB, i.MSB, i.NVB, i.DAB, i.SHB, i.OJB, i.SEA, i.TPB, i.PGB, i.BIDV, i.AGB, i.SCB, i.VPB, i.VAB, i.GPB, i.SGB, i.NAB, i.BAB {
        width: 80px;
        height: 30px;
        display: block;
        background: url(https://www.nganluong.vn/webskins/skins/nganluong/checkout/version3/images/bank_logo.png) no-repeat;
    }

    i.MASTE {
        background-position: 0px -31px
    }

    i.AMREX {
        background-position: 0px -62px
    }

    i.JCB {
        background-position: 0px -93px;
    }

    i.VCB {
        background-position: 0px -124px;
    }

    i.TCB {
        background-position: 0px -155px;
    }

    i.MB {
        background-position: 0px -186px;
    }

    i.VIB {
        background-position: 0px -217px;
    }

    i.ICB {
        background-position: 0px -248px;
    }

    i.EXB {
        background-position: 0px -279px;
    }

    i.ACB {
        background-position: 0px -310px;
    }

    i.HDB {
        background-position: 0px -341px;
    }

    i.MSB {
        background-position: 0px -372px;
    }

    i.NVB {
        background-position: 0px -403px;
    }

    i.DAB {
        background-position: 0px -434px;
    }

    i.SHB {
        background-position: 0px -465px;
    }

    i.OJB {
        background-position: 0px -496px;
    }

    i.SEA {
        background-position: 0px -527px;
    }

    i.TPB {
        background-position: 0px -558px;
    }

    i.PGB {
        background-position: 0px -589px;
    }

    i.BIDV {
        background-position: 0px -620px;
    }

    i.AGB {
        background-position: 0px -651px;
    }

    i.SCB {
        background-position: 0px -682px;
    }

    i.VPB {
        background-position: 0px -713px;
    }

    i.VAB {
        background-position: 0px -744px;
    }

    i.GPB {
        background-position: 0px -775px;
    }

    i.SGB {
        background-position: 0px -806px;
    }

    i.NAB {
        background-position: 0px -837px;
    }

    i.BAB {
        background-position: 0px -868px;
    }

    ul.cardList li {
        cursor: pointer;
        float: left;
        margin-right: 0;
        padding: 5px 4px;
        text-align: center;
        width: 90px;
    }

    .nl-banks {
        margin: 23px;
    }

        .nl-banks p {
            font-style: italic;
            font-size: smaller;
        }
</style>

<form asp-area="PaymentNganLuong" asp-controller="NganLuong" asp-action="SubmitPayment" method="POST" class="form-horizontal">
    <div class="modal-header">
        <h5 class="modal-title"><img style="width:200px" src="https://www.nganluong.vn/css/newlanding/img//nganluong-logo-color.svg" /></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div id="nganluong-checkout" class="p-3">
            <div>
                <div class="form-group form-check">
                    <input type="radio" value="ATM_ONLINE" checked="checked" name="paymentOption" class="form-check-input" id="domesticBank">
                    <label class="form-check-label" for="domesticBank">Thanh toán online bằng thẻ ngân hàng nội địa</label>
                </div>
                <div class="form-group nl-banks">
                    <p>Lưu ý: Bạn cần đăng ký Internet-Banking hoặc dịch vụ thanh toán trực tuyến tại ngân hàng trước khi thực hiện.</p>
                    <ul class="cardList list-unstyled clearfix">
                        <li class="bank-online-methods">
                            <label for="vcb_bank">
                                <i class="VCB" title="Ngân hàng TMCP Ngoại Thương Việt Nam"></i>
                            </label>
                            <input id="vcb_bank" checked="checked" type="radio" name="bankCode" value="VCB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="dab_bank">
                                <i class="DAB" title="Ngân hàng Đông Á"></i>
                            </label>
                            <input id="dab_bank" type="radio" name="bankCode" value="DAB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="exb_bank">
                                <i class="EXB" title="Ngân hàng Xuất Nhập Khẩu"></i>
                            </label>
                            <input id="exb_bank" type="radio" name="bankCode" value="EXB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="tcb_bank">
                                <i class="TCB" title="Ngân hàng Kỹ Thương"></i>
                            </label>
                            <input id="tcb_bank" type="radio" name="bankCode" value="TCB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="mb_bank">
                                <i class="MB" title="Ngân hàng Quân Đội"></i>
                            </label>
                            <input id="mb_bank" type="radio" name="bankCode" value="MB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="shb_bank">
                                <i class="SHB" title="Ngân hàng Sài Gòn - Hà Nội"></i>
                            </label>
                            <input id="shb_bank" type="radio" name="bankCode" value="SHB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="vib_bank">
                                <i class="VIB" title="Ngân hàng Quốc tế"></i>
                            </label>
                            <input id="vib_bank" type="radio" name="bankCode" value="VIB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="icb_bank">
                                <i class="ICB" title="Ngân hàng Công Thương Việt Nam"></i>
                            </label>
                            <input id="icb_bank" type="radio" name="bankCode" value="ICB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="acb_bank">
                                <i class="ACB" title="Ngân hàng Á Châu"></i>
                            </label>
                            <input id="acb_bank" type="radio" name="bankCode" value="ACB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="hdb_bank">
                                <i class="HDB" title="Ngân hàng Phát triển Nhà TPHCM"></i>
                            </label>
                            <input id="hdb_bank" type="radio" name="bankCode" value="HDB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="msb_bank">
                                <i class="MSB" title="Ngân hàng Hàng Hải"></i>
                            </label>
                            <input id="msb_bank" type="radio" name="bankCode" value="MSB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="nvb_bank">
                                <i class="NVB" title="Ngân hàng Nam Việt"></i>
                            </label>
                            <input id="nvb_bank" type="radio" name="bankCode" value="NVB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="vab_bank">
                                <i class="VAB" title="Ngân hàng Việt Á"></i>
                            </label>
                            <input id="vab_bank" type="radio" name="bankCode" value="VAB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="vpb_bank">
                                <i class="VPB" title="Ngân Hàng Việt Nam Thịnh Vượng"></i>
                            </label>
                            <input id="vpb_bank" type="radio" name="bankCode" value="VPB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="scb_bank">
                                <i class="SCB" title="Ngân hàng Sài Gòn Thương tín"></i>
                            </label>
                            <input id="scb_bank" type="radio" name="bankCode" value="SCB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="ojb_bank">
                                <i class="OJB" title="Ngân hàng Đại Dương"></i>
                            </label>
                            <input id="ojb_bank" type="radio" name="bankCode" value="OJB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="pgb_bank">
                                <i class="PGB" title="Ngân hàng Xăng dầu Petrolimex"></i>
                            </label>
                            <input id="pgb_bank" type="radio" name="bankCode" value="PGB" />
                        </li>
                        @*Hide this for better layout
                            <li class="bank-online-methods"> 
                            <label for="gpb_bank">
                                <i class="GPB" title="Ngân hàng TMCP Dầu khí Toàn Cầu"></i>
                            </label>
                            <input id="gpb_bank" type="radio" name="bankCode" value="GPB" />
                        </li>*@
                        <li class="bank-online-methods">
                            <label for="agb_bank">
                                <i class="AGB" title="Ngân hàng Nông nghiệp &amp; Phát triển nông thôn"></i>
                            </label>
                            <input id="agb_bank" type="radio" name="bankCode" value="AGB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="sgb_bank">
                                <i class="SGB" title="Ngân hàng Sài Gòn Công Thương"></i>
                            </label>
                            <input id="sgb_bank" type="radio" name="bankCode" value="SGB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="nab_bank">
                                <i class="NAB" title="Ngân hàng Nam Á"></i>
                            </label>
                            <input id="nab_bank" type="radio" name="bankCode" value="NAB" />
                        </li>
                        <li class="bank-online-methods">
                            <label for="bab_bank">
                                <i class="BAB" title="Ngân hàng Bắc Á"></i>
                            </label>
                            <input id="bab_bank" type="radio" name="bankCode" value="BAB" />
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <div class="form-group form-check">
                    <input type="radio" value="NL" name="paymentOption" class="form-check-input" id="viNganLuong">
                    <label class="form-check-label" for="viNganLuong">Thanh toán bằng Ví điện tử NgânLượng</label>
                </div>
                @*<div class="nl-visa-info">
                        Thanh toán trực tuyến AN TOÀN và ĐƯỢC BẢO VỆ, sử dụng thẻ ngân hàng trong và ngoài nước hoặc nhiều hình thức tiện lợi khác.
                        Được bảo hộ & cấp phép bởi NGÂN HÀNG NHÀ NƯỚC, ví điện tử duy nhất được cộng đồng ƯA THÍCH NHẤT 2 năm liên tiếp, Bộ Thông tin Truyền thông trao giải thưởng Sao Khuê
                        <br />Giao dịch. Đăng ký ví NgânLượng.vn miễn phí <a href="https://www.nganluong.vn/?portal=nganluong&amp;page=user_register" target="_blank">tại đây</a>
                    </div>*@
            </div>
            <div>
                <div class="form-group form-check">
                    <input type="radio" value="VISA" name="paymentOption" class="form-check-input" id="nganLuongVisa">
                    <label class="form-check-label" for="nganLuongVisa">Thanh toán bằng thẻ Visa hoặc MasterCard</label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Thanh toán</button>
    </div>
</form>

<script>
    $(function () {
        var bankCode = $(".nl-banks input[name='bankCode']:checked").val();
        $('#nganluong-checkout input:radio[name=paymentOption]').change(function () {
            if (this.value == 'ATM_ONLINE') {
                $('.nl-banks input').prop('disabled', false);
                $(".nl-banks input[value=" + bankCode + "]").prop("checked", true);
            }
            else {
                var $checkedBank = $(".nl-banks input[name='bankCode']:checked");
                if ($checkedBank.length !== 0) {
                    bankCode = $checkedBank.val();
                    $checkedBank.prop("checked", false);
                }
                $('.nl-banks input').prop('disabled', true);
            }
        });
    });
</script>
